﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>物理连接绑定</title>
	<link rel="stylesheet" href="./css/css.css">
	<link rel="stylesheet" href="./css/leftBar.css">
	<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="./css/plb.css" />
	<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="./js/messagecenter.js"></script>
	<script type="text/javascript" src="./js/common.js"></script>
	<script type="text/javascript" src="./js/canvas6.js"></script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}

	</style>
	<script>
		
		
        function lineEvent1(){}
        function lineEvent2(){}
        function lineEvent3(){}
        function  iconEvent4(obj){
            alert("机箱");

        }
        var popCurLink;
        function iconEvent5(obj){
        	
        }
       
        /*图标双击*/
        /*处理单元相关链路查看
        */
        function iconEvent4(obj1) {
       	var titleHtml=	'<tr><td><div>'+obj1.cpu.cpuId+'端口</div></td><td><div>处理单元</div></td><td><div>对方端口号</div></td><td><div>连接模式</div></td></tr>';
	  	$("#appPortheader").html(titleHtml);
        var cupId=obj1.id;
           //lineObjs[0].param[0].leftCpu.cpuId
           var leftPort="";
           var rightPort="";
           var cpuName="";
           var bandwidthAvailable="";
           var dataArr=[];
           for(var i=0;i<lineObjs.length;i++){
        	   var param=lineObjs[i].param;
        	   for(var j=0;j<param.length;j++){
        		   if(param[j].leftCpu.id==cupId){
        			   var dataJson = {};
        			   dataJson.leftPort= param[j].leftPort;
        			   dataJson.rightPort=param[j].rightPort;
        			   dataJson.cpuName=obj1.id;
        			   dataJson.bandwidthAvailable=param[j].bandwidthAvailable;
        			   dataArr.push(dataJson);
        		   }else if(param[j].rightCpu.id==cupId){
        			   var dataJson = {};
        			   dataJson.leftPort= param[j].rightPort;
        			   dataJson.rightPort=param[j].leftPort;
        			   dataJson.cpuName=obj1.id;
        			   dataJson.bandwidthAvailable=param[j].bandwidthAvailable;
        			   dataArr.push(dataJson);
        		   }
        	   }
           }
            addDataPop(dataArr);
            $("#showInfo2").show();
            $("#showInfo").hide();
        }
      function addDataPop(data){
            $(".contentTableDiv2 .popTbody2").empty();
            var html = '';
            $.each(data,function(k,v){
                html += '<tr>';
                html += '<td><div>'+v.leftPort+'</div></td>';
                html += '<td><div>'+v.cpuName+'</div></td>';
                html += '<td><div>'+v.rightPort+'</div></td>';
                html += '<td><div>'+v.bandwidthAvailable+'</div></td>';
                html += '</tr>';
            });
            $(".contentTableDiv2 .popTbody2").append(html);
            tableSum2();
        }
        /*物理链路端口配置*/
        /*线双击
        */
        var curLink;//当前选中的线
        var leftCpuId;
        var rightCpuId;
        function lineEvent3(obj1,obj2,linkObj){
        	popCurLink = linkObj;
        	leftCpuId = obj1.id;
        	rightCpuId = obj2.id;
        	var titleHtml=	'<tr><td><div>'+leftCpuId+'端口</div></td><td><div>'+rightCpuId+'端口</div></td><td><div>对方端口号</div></td><td><div>连接模式</div></td></tr>';
    	  	$("#appPortheader2").html(titleHtml);
        	//if(linkObj.param||linkObj.paramAll){
            	var dataArr = []
            	var links = linkObj.param;
            	if(links){
            		for(var i = 0;i<links.length;i++){
                 		var dataJson = {};
                         dataJson.id=links[i].id;
                         dataJson.leftPort = links[i].leftPort;
                         dataJson.rightPort = links[i].rightPort;
                         dataJson.bandwidthAvailable = links[i].bandwidthAvailable;
                         dataArr.push(dataJson);
                   	}
            	}
        	
           	if(dataArr!=null){
                addDataPop2(dataArr);
           	}
            //addDataPop2(dataArr);
            $("#showInfo").show();
            $("#showInfo2").hide();
            tableSum();

        }

        function addDataPop2(data){
            $(".contentTableDiv .popTbody").empty();
            var html = '';
            $.each(data,function(k,v){
                if(v.id){
                	html += '<tr tId="'+v.id+'">';
                }else{
                	html += '<tr>';
                }
                html += '<td>'+v.leftPort+'</td>';
                html += '<td>'+v.rightPort+'</td>';
                html += '<td>'+v.bandwidthAvailable+'</td>';
                html += '<td><div class="update app_text" style="cursor:pointer;" onclick="Update1(this)">编辑</div><div class="delete" style="cursor:pointer;" onclick="Delete(this);">删除</div></td>\n';
                html += '</tr>';
            });
            $(".contentTableDiv .popTbody").append(html);
        }
        function tableSum2() {
            $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
            if ($(".contentTableDiv2").scrollTop() > 0) {
                var scrollWidth = getScrollbarWidth();
                $(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
            } else {
                $(".contentTableDiv2 table").css("width", "100%");
            }
            $(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
        }
        function tableSum() {
            $(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
            if ($(".contentTableDiv").scrollTop() > 0) {
                var scrollWidth = getScrollbarWidth();
                $(".contentTableDiv").css("right",(30-scrollWidth)+"px");
            } else {
                $(".contentTableDiv table").css("width", "100%");
            }
            $(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
        }
       
        function getScrollbarWidth() {
            var odiv = document.createElement('div'),//创建一个div
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll'//让他有滚动条
                }, i, scrollbarWidth;
            for (i in styles) odiv.style[i] = styles[i];
            document.body.appendChild(odiv);//把div添加到body中
            scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
            odiv.remove();//移除创建的div
            return scrollbarWidth;//返回滚动条宽度
        }

	</script>
</head>
<body>
<div class="editPOP"></div>
<div class="left_content">
	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu" onclick="window.location.href='physical_topology_library';"  style="background-color:#04A0E9;color:#FFFFFF;border-top:1px solid #FFFFFF;">拓扑文件库</div>
		<div class="left_menu" onclick="window.location.href='logical_application_library';">逻辑预案库</div>
		<div class="left_menu" onclick="window.location.href='deploy_topology_library';">部署库</div>
		<div class="left_menu monitor">监控</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='physical_monitors';">
				物理监控
			</div>
		</div>
		<div class="left_menu level2" >
			<div class="level2Border" onclick="window.location.href='logical_monitors';">
				逻辑监控
			</div>
		</div>
		<div class="left_menu other">其他</div>
		<div class="left_menu  level22" >
			<div class="level22Border" onclick="window.location.href='commonCMD';">
				我的常用命令
			</div>
		</div>
		<div class="left_menu level22" >
			<div class="level22Border" onclick="window.location.href='generalCMD';">
				命令模板
			</div>
		</div>
	</div>
	<form th:action="@{/logout}" method="post" >
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="bigmoniter" type="button" onclick="showBig();" style="cursor:pointer;">大屏监控</button>
			<button class="login"  type="submit">注销</button>
		</div>
	</form>
</div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curId" name="curId">
		<input type="hidden" id="returnUrl" name="returnUrl" value=''>
		<input type="hidden" id="id" name="id">
		<input type="hidden" id="name" name="name">
		<!-- 头部 -->
		<div class="top-bar">
			<div style="font-size: 18px;color:#424B52;">绑定物理链路</div>
			<button class="b5" type="button" onclick="showView();">预览</button>
			<button  class="b6" type="button" onclick="save2();">保存</button>
		</div>
		<!-- 右侧 -->
		<div class="right">
			<div class="r0 app_text">处理单元连线</div>
			<div class="r1">
				<div  class="shadow"><img  class="addLine" clicktype = "1" style="cursor:pointer;" onclick="setDrawLine('crosshair' , lineEvent1 , lineEvent2,$(this))" src="./images/topology/line.png"></div>
				<div class="r-text">添加连线</div>
			</div>
		</div>
		<!-- 左侧 -->
		<div class="table-box">

		</div>
		<!-- 底部 -->
	</form>
</div>
<!--处理单元相关链路查看-->
	<div class="pop_block2" id="showInfo2" style="display:none;">
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">APP端口配置</div>
			<span>Processes&nbsp;unit&nbsp;related&nbsp;to&nbsp;view</span>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
		<div class="headerTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;">
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tbody id="appPortheader"></tbody>
			</table>
		</div>
		<div class="contentTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tbody class="popTbody2"></tbody>
			</table>
		</div>
	</div>
<!--应用连接配置栏-->
	<div class="pop_block" id="showInfo" style="display:none;">
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">应用连接配置栏</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="./images/bsk/pop_exit.png" onclick="exit_pop();"></div>

		<div class="headerTableDiv">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tbody id="appPortheader2"></tbody>
			</table>
		</div>
		<div class="contentTableDiv">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;" >
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tbody class="popTbody" id="popTBody"></tbody>
			</table>
		</div>
		<div class="pop_input">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;" >
				
				<tr>
					<td ><input id="leftPort" type="text" ></td>
					<td ><input id="rightPort" type="text" ></td>
					<td >
						<select id="type" style="width:150px;background-color:#F8F8F8;border:none;">
							<option value="1x">1x</option>
							<option value="2x">2x</option>
							<option value="3x">3x</option>
							<option value="4x">4x</option>
						</select>
					</td>
					<td >
						<div class="app_text" onclick="addConn(this);" style="float:left;margin-left:18px;cursor:pointer;">添加链接</div><div class="app_text" onclick="save3();" style="float:right;margin-right:30px;cursor:pointer;">保存</div>
					</td>
				</tr>
				
			</table>
			
		</div>
	</div>
</body>
<script type="text/javascript">
var canvasData = {x:0 , y:0, width:Math.ceil(window.innerWidth-325)-100, height:Math.ceil(window.innerHeight-52)};
init_canvas(canvasData ,3,lineEvent1 , lineEvent2 ,lineEvent3,iconEvent4,iconEvent5);//初始化
/* addList();*/
drawCircles();
	//获取机箱板卡cpu
	var phyname=null;
	var returnUrl = 'physical_link_bindors';
	returnUrl += '?id='+id;
	$("#returnUrl").val(returnUrl);
    var id = "[[${id}]]";
    $.post('[[@{/physical_topology/get_by_id}]]',{id:id},"JSON").done(function(res){
        if(res){
            var data = res.data;
            phyname=data.name;
            var machineBoxes = data.machineBoxes;
            if(machineBoxes&&machineBoxes.length>0){
                $.each(machineBoxes,function(k,v){
                    addCanvasLevel1(k,v);
                    var boards = v.boards;
                    if(boards&&boards.length>0){
                        $.each(boards,function(k1,v1){
							v1.machineBoxId=v.id;                        	
                            addCanvasLevel2(k ,k1,v1);
                            var cpus = v1.cpus;
                            if(cpus&&cpus.length>0){
                                $.each(cpus,function(k2,v2){
                                	var img ;
                                	if(v2.cpuType==1){
                             			img = "../images/topology/SW.png";
                             		}else if(v2.cpuType==2){
                             			img = "../images/topology/FPGA.png";
                             		}else if(v2.cpuType==3){
                             			img = "../images/topology/MSU2.png";
                             		}else if(v2.cpuType==4){
                             			img = "../images/topology/DSP.png";
                             		}else if(v2.cpuType==5){
                             			img = "../images/topology/PPC.png";
                             		}else if(v2.cpuType==6){
                             			img = "../images/topology/ARM.png";
                             		} 
                                	v2.boardId=v1.id;
                                	v2.machineBoxId=v.id;
                                    addCanvasLevel3(k,k1,k2,img,v2);
                                });
                            }
                        });
                    }
                });
            }
            drawCircles();
        }
      //cpu连线
        $.ajax({url:'[[@{/physical_link/find_by_physical_topology_id}]]',
        	data:{id:id},
        	dataType:"JSON",
        	ContentType: "application/x-www-form-urlencoded",
        	type:"POST"
        }).done(function(res){
            if(res){
                var links = res.data;
                if(links&&links.length>0){
                    var linkObjs = {};
                	for(i=0;i<links.length;i++){
                    	var leftId = links[i].leftCpu.id;
                    	var rightId = links[i].rightCpu.id;
                    	var allIds = leftId+"-"+rightId;
                    	//用于计算两个cpu之间一共多少条线
                    	if($("#"+allIds).length>0){
                    		var count = $("#"+allIds).val();
                    		count++;
                    		$("#"+allIds).val(count);
                    		var linksData = $("#"+allIds).data("links");
                    		if(linksData){
                    			linksData.push(links[i]);
                    		}else{
                    			linksData = [];
                    		}
                    		$("#"+allIds).data("links",linksData);
                    	}else{
                    		var input = '<input value="1" rightId="'+rightId+'" leftId="'+leftId+'" type="hidden" id="'+allIds+'" class="allIds">';
                    		$("body").append(input);
                    		var linksData = [];
                    		linksData.push(links[i]);
                    		$("#"+allIds).data("links",linksData);
                    	}
                    }
					var linksObjs = $(".allIds");
					for(var i=0;i<linksObjs.length;i++){
						var leftId = $(linksObjs[i]).attr("leftId");
						var rightId = $(linksObjs[i]).attr("rightId");
						var count = $(linksObjs[i]).val();
						var linksData = $($(".allIds")[i]).data("links");
						var left;
	                	var right;
	                	for(j=0;j<canvasAllLevel3.length;j++){
	                		if(canvasAllLevel3[j].id==leftId){
	                			left = canvasAllLevel3[j];
	                		}
	                		if(canvasAllLevel3[j].id==rightId){
	                			right = canvasAllLevel3[j];
	                		}
	                	}
	                	var paramAll = {};
	                	doLine( left,right  ,count ,{param:linksData,paramAll:paramAll});
	                    drawCircles();
					}
    			}
    		}
    	});
    });
	//保存链路
	var machines=canvasAllLevel1;
	var lines=lineObjs;
    function save2() {
        var params = [];
        for(var i=0;i<lineObjs.length;i++){
        	var links = lineObjs[i].param;
        	if(links){
        		for(var j=0;j<links.length;j++){
        			var link = {};
        			if(links[j].id){
        				link.id = links[j].id;
        			}
        			link.bandwidthAvailable = links[j].bandwidthAvailable;
        			link.leftCpu = {id:links[j].leftCpu.id};
        			link.rightCpu = {id:links[j].rightCpu.id};
        			link.leftPort = links[j].leftPort;
        			//link.physicalLinkID = 11;
        			link.rightPort = links[j].rightPort;
        			params.push(link);
            	}
        	}
        };
        params = JSON.stringify(params);
        $.ajax({
        	url:'[[@{/physical_link/saves}]]',
        	data:params,
        	dataType:"JSON",
        	type:"POST",
        	contentType:"application/json"
        }).done(function(res){
        	if(res.success){
        		alert("保存成功");
        	}
        });
    }
    //添加链接pop
	function addConn(obj){
		var tr = $(obj).parent().parent();
		var leftPort = $("#leftPort").val();
		if(leftPort==""||parseInt(leftPort)>popCurLink.obj1.typeCount-1){
			alert("端口上限"+(popCurLink.obj1.typeCount-1));
			$("#leftPort").focus();
			return false;
		}
		var rightPort = $("#rightPort").val();
		if(rightPort==""||parseInt(rightPort)>popCurLink.obj2.typeCount-1){
			alert("端口上限"+(popCurLink.obj2.typeCount-1));
			$("#rightPort").focus();
			return false;
		}
		var type = $("#type").val();
		var ran = new Date().getTime();
		var newTr = "<tr id='"+ran+"' ><td>"+leftPort+"</td><td>"+rightPort+"</td><td>"+type+"</td>";
		newTr+= '<td><div class="update app_text" style="cursor:pointer;" onclick="Update1(this)">编辑</div><div class="delete" style="cursor:pointer;" onclick="Delete(this);">删除</div></td>'
		newTr+= '</tr>';
		var param = popCurLink.param;
		if(param==null){
			popCurLink.param=[];
		}
		var newParam = {};
		newParam.bandwidthAvailable = type;
		newParam.leftCpu = {id:popCurLink.obj1.id};
		newParam.rightCpu = {id:popCurLink.obj2.id};
		newParam.leftPort = leftPort;
		newParam.rightPort = rightPort;
		newParam.ran = ran;
		popCurLink.param.push(newParam);
		popCurLink.count = popCurLink.param.length;
		$("#popTBody").append(newTr);
		$("#leftPort").val("");
		$("#rightPort").val("");
		$("#type").val("");
		drawCircles();
	}
	var exRan;
	var exId;
	function Update1(obj){
		exRan=null;
		exId = null;
		var ran = $(obj).parent().parent().attr("id");
		var id  = $(obj).parent().parent().attr("tId");
		var tds = $(obj).parent().parent().find("td");
		if(ran){
			exRan = ran;
		}else if(id){
			exId = id;
		}
		$("#leftPort").val($(tds[0]).html());
		$("#rightPort").val($(tds[1]).html());
		$("#type").val($(tds[2]).html());
	}
	function newDelete(obj){
		var ran = $(obj).parent().parent().attr("id");
		var param = popCurLink.param;
		var delIndex;
		for(var i=0;i<param.length;i++){
			if(param[i].ran&&param[i].ran==ran){
				delIndex = i;
			}
		}
		if(delIndex){
			param.splice(delIndex, 1);
			$(obj).parent().parent().remove();
		}
	}
	//删除链接
	function Delete(obj){
		var id = $(obj).parent().parent().attr("tId");
		var ran = $(obj).parent().parent().attr("id");
		var param = popCurLink.param;
		var delIndex;
		if(id){
			for(var i=0;i<param.length;i++){
				if(param[i].id&&param[i].id==id){
					delIndex = i;
				}
			}
			param.splice(delIndex, 1);
    		$(obj).parent().parent().remove();
		}else if(ran){
			for(var i=0;i<param.length;i++){
				if(param[i].ran&&param[i].ran==ran){
					delIndex = i;
				}
			}
			if(!isNaN(delIndex)){
				param.splice(delIndex, 1);
				$(obj).parent().parent().remove();
			}
		}
		popCurLink.count = popCurLink.param.length;
		alert("刪除成功 ");
		drawCircles();
	}
	//修改链接
    function Update(id,obj) {
    	exId = id;
    	$("#popTBody tr").removeClass("trchecked");
		$(obj).parent().parent().addClass("trchecked");
    	var tds = $(obj).parent().parent().find("td");
		$("#leftPort").val($(tds[0]).html());
		$("#rightPort").val($(tds[1]).html());
		$("#type").val($(tds[2]).html());
    }
    //弹窗保存链路
    function save3(){
		//$("#showInfo").hide();
		$("#showInfo2").hide();
    	var leftPort = $("#leftPort").val();
		if(leftPort==""){
			return false;
		}
		var rightPort = $("#rightPort").val();
		if(rightPort==""){
			return false;
		}
		var type = $("#type").val();
		if(exId){
			var param = popCurLink.param;
			for(var i=0;i<param.length;i++){
				if(param[i].id&&param[i].id==exId){
					param[i].leftPort = leftPort;
					param[i].rightPort = rightPort;
					param[i].bandwidthAvailable = type;
					break;
				}
			}
			var tds = $("#popTBody tr[tId="+exId+"] td");
			$(tds[0]).html(leftPort);
			$(tds[1]).html(rightPort);
			$(tds[2]).html(type);
		}else if(exRan){
			var param = popCurLink.param;
			for(var i=0;i<param.length;i++){
				if(param[i].ran&&param[i].ran==exRan){
					param[i].leftPort = leftPort;
					param[i].rightPort = rightPort;
					param[i].bandwidthAvailable = type;
					break;
				}
			}
			var tds = $("#"+exRan+" td");
			$(tds[0]).html(leftPort);
			$(tds[1]).html(rightPort);
			$(tds[2]).html(type);
		}
		exId = null;
		exRan = null;
		$("#popTBody tr").removeClass("trchecked");
		$("#leftPort").val("");
		$("#rightPort").val("");
		$("#type").val("");
		alert("保存成功 ");
	}
    function exit_pop(){
        $("#showInfo").hide();
    }
    function exit_pop2(){
        $("#showInfo2").hide();
    }
	function showView(){
		$("#id").val(id);
		$("#name").val(phyname);
		$("#form1").attr({action:'[[@{physical_top_all_view}]]',method:"GET"}).submit();
	}
	function showBig(){
		window.location.href="physical_monitors2"
	}
</script>
<script type="text/javascript">
		//彈窗拖動
		$(function(){
			$(".pop_block").on({
			    mousedown: function(e){
			    			var obj = e.target;
			    			if(!$(obj).is("input")){
			    				var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			                
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
	
			$(".pop_block2").on({
			    mousedown: function(e){
					    	var obj = e.target;
			    			if(!$(obj).is("input")){
		    				 	var el=$(this);
				                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
				                $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
			    			}
			               
			            },
			   mouseup: function(e){ $(document).off('mousemove.drag'); }
			});
		});
	</script>
</html>
